<div class="content">
  <div class="row">
    <div *ngIf="isCoverageEntity" class="info-lynk-popover ng-scope">
      <div class="coverageBox">
        Sustainalytics covers
        <span>{{coverageEntityName}}</span> through research on a related entity in our research universe,
        <span>{{company.companyName}}</span>.
        <br/> Research for
        <span>{{company.companyName}}</span> is shown below.
      </div>
    </div>
  </div>

  <div class="title-section">
    <div class="row">
      <div class="col-md-12">
        <div class="row title-company-arrows">
          <div class="col-md-5">
            <span *ngIf="!isCoverageEntity">{{company.companyName}}</span>
            <span *ngIf="isCoverageEntity">{{coverageEntityName}}</span>

          </div>
          <div class="col-md-7">
            <button class="btn-risk_left btn_risk_special pull-right" style="border: none;" (click)="addToPortfolio()">Add to Portfolio</button>
            <button class="btn-risk_left btn_risk_special pull-right" style="border: none; width: 200px; margin-right: 10px;" (click)="downloadCompanyRiskSummaryReport()"
              [disabled]="company.availability != 1">Download Summary Report</button>
            <button class="btn-risk_left btn_risk_special pull-right" style="border: none; margin-right: 10px;" (click)="downloadCompanyRiskReport()"
              [disabled]="company.availability != 1">Download Report</button>
          </div>
        </div>
        <div class="row col-md-12 title-company-extra" *ngIf="company.exchangeTicker && company.exchangeTicker.trim() != ':'">
          {{company.exchangeTicker}}
        </div>
      </div>
    </div>
  </div>

  <br/>
  <div *ngIf="company.availability == 1" class="row">
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked" style="background-color: #F0F9F8;">
        <ul class="nav indicators-navigation">
          <li role="presentation" [routerLinkActive]="['active']">
            <a [routerLink]="['summary']" style="font-size: 10pt">
              <img class="pull-left" width="24" [src]="resourcesUrl + '/97_colored_large.png'" >
              <div class="link-text">Overview</div>
            </a>
          </li>
          <li *ngIf="company.issues" role="presentation" [routerLinkActive]="['active']">
            <a *ngIf="company.issues.baseline != null" [routerLink]="['mei', company.issues.baseline.externalId, company.issues.baseline.type]" style="font-size: 10pt">
              <img class="pull-left" width="24" [src]="resourcesUrl + '/' + company.issues.baseline.externalId + '_colored_large.png'" >
              <div class="link-text">{{ company.issues.baseline.name }}</div>
              <div class="clearfix"></div>
            </a>
          </li>
          <li role="presentation">
            <a href="javascript:;" class="header" style="font-size:9pt; text-transform: uppercase; padding-bottom:0px;">Material ESG Issues</a>
          </li>
          <li role="presentation" *ngFor="let issue of company.issues.others" [routerLinkActive]="['active']">            
            <a [routerLink]="['mei', issue.externalId, issue.type]" style="font-size: 10pt">
              <img class="pull-left" width="24" [src]="resourcesUrl + '/' + (issue.type == 'IdiosyncraticIssue' ? 999 : issue.externalId) + '_colored_large.png'">
              <div class="link-text">{{ issue.name }}
                <div class="issue-label" *ngIf="issue.isMain">
                  Key Issue
                </div>
              </div>
              <div class="clearfix"></div>
            </a>
          </li>
        </ul>
      </ul>
    </div>

    <div class="col-md-10">
      <router-outlet></router-outlet>
    </div>
  </div>

  <div *ngIf="company.availability == 2" class="gray-bg-top">
    <span class="title-black-bold">Research not available.</span>
  </div>

  <div *ngIf="company.availability == 3" class="gray-bg-top">
    <span class="title-black-bold">Research in progress.</span>
  </div>

  <div *ngIf="company.availability == 4" class="gray-bg-top">
    <span class="title-black-bold">Research available with additional subscriptions.</span>
  </div>

  <div *ngIf="company.availability == 5" class="gray-bg-top">
    <span class="title-black-bold">Framework not applicable.</span>
  </div>
</div>